<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String type = request.getParameter("type");
%>
<!DOCTYPE html>
<html>
    <head>
    	<base href="<%=basePath%>">
        <title>WebDig网站流量分析决策系统</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSS -->
        <link rel="stylesheet" href="page/js-lib/bootstrap-4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="page/js-lib/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="page/css/form-elements.css">
        <link rel="stylesheet" href="page/css/login.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="page/icon/computer.png">
		<!-- Javascript -->
        <script src="page/js-lib/jquery/jquery.min.js"></script>
        <script src="page/js-lib/jquery/jquery.backstretch.min.js"></script>
        <script src="page/js-lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>
        <script src="page/js/common/MD5.js"></script>
        <script src="page/js/common/base64.js"></script>
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->
       
        <script type="text/javascript">
        	var type = '<%=type%>';
        	// 错误信息
        	var errorInfo = {1: '用户名错误！',2: '账号停用！',3: '密码错误！',4: '系统错误！'};
			$(document).ready(function() {	
			    //背景图片（全屏展开）     
				$.backstretch("page/img/backgrounds/loginback.jpg");	            
				//表单验证        
				$('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
					$(this).removeClass('input-error');
				});
				$('.login-form').on('submit', function(e) {  	
					$(this).find('input[type="text"], input[type="password"], textarea').each(function(){
						if( $(this).val() == "" ) {
							e.preventDefault();
							$(this).addClass('input-error');
						}else{
							$(this).removeClass('input-error');
						}
					});
				});
				document.onkeydown = function(e){ 
				    var ev = document.all ? window.event : e;
				    if(ev.keyCode==13) {
				    	goLogin();//处理事件
				     }
				}
				init(); 
			});	
			function goLogin() {
				var userName = $("#v_userName").val();
				var password = $("#v_password").val();
				if (userName != "" && password != "") {
					var md5_password = MD5(password);//md5
					//base64
					$("#password").val(Base64.encode(md5_password));
					$("#userName").val(Base64.encode(userName));
					$("#loginForm").submit();
				}
			}
			function init(obj){
				if(type && type != 'null'){
					var info = errorInfo[type];
					if(info) {
						if(type==3){
							warning("v_password",info);
							$("#v_password").focus();
						}else{
							warning("v_userName",info);
							$("#v_userName").focus();
						}
					}
				}
				$("#v_userName").val("");
				$("#v_userName").focus();
			}
			//更换验证码
			function changeImg() {        
		        var imgSrc = $("#v_idcode");    
		        var src = imgSrc.attr("src");        
		        imgSrc.attr("src", chgUrl(src));
		    }
		    // 为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
		    function chgUrl(url) {
		        var timestamp = (new Date()).valueOf();
		        url = url.substring(0, 20);
		        if ((url.indexOf("&") >= 0)) {
		            url = url + "×tamp=" + timestamp;
		        } else {
		            url = url + "?timestamp=" + timestamp;
		        }
		        return url;
		    }
        </script>
    </head>

    <body>
        <!-- Top content -->
        <div class="top-content">
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 text">
                            <h1 class="text-center"><strong>WebDig网站流量分析决策系统</strong></h1>
                        </div>
                    </div>
                    <div class="row">
                    	<div class="col-md-3"></div>
                        <div class="col-md-6 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>登录</h3>
                            		<p>请输入用户名和密码完成登录:</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-lock"></i>
                        		</div>
                            </div>
                            <div class="form-bottom">
			                    <form role="form" action="<%=basePath%>user/login" method="post" class="login-form" id="loginForm">
			                    	<input type="hidden" id="userName" name="userName"/>
		    						<input type="hidden" id="password" name="password"/>
			                    	<div class="form-group">
			                    		<label class="sr-only" for="v_userName">用户名</label>
			                        	<input type="text" id="v_userName" placeholder="请输入用户名" class="form-username form-control">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="v_password">密码</label>
			                        	<input type="password" id="v_password" placeholder="请输入密码" class="form-password form-control">
			                        </div>
			                        <div class="input-group form-group" id="">
							            <div class="row">
											<div class="col-lg-4">
												<input type="text" class="form-control" placeholder="请输入验证码">
											</div>
											<div class="col-lg-4">
												<img src="${pageContext.request.contextPath}/user/getCode" width = "150" height = "50" id="v_idcode">
											</div>
											<div class="col-lg-4">
												<a href="javascript:void(0);" onclick="changeImg()">看不清，换一张</a>
											</div>
										</div>
							        </div>
			                        <button type="submit" onclick="goLogin()" id="btn_submit" class="btn">登录</button>
			                    </form>
		                    </div>
                        </div>
                        <div class="col-md-3"></div>
                    </div>
                </div>
            </div>    
        </div>
    </body>
</html>